<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-03-08 09:05:33
-->
<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="课程详情"
        left-text="返回"
        left-arrow
        @click-left="handleRturn"
      >
      </van-nav-bar>

      <video-player
        ref="videoPlayer"
        :url="url"
        :coverUrl="coverUrl"
        v-if="show"
      ></video-player>
    </van-sticky>

    <Detail :data="result"></Detail>

    <Reward ref="reward" @handleReward="handleReward"></Reward>

    <van-tabs v-model:active="active" @click-tab="onClickTab">
      <van-tab title="目录">
        <Catalogue
          :list="chapterRsps"
          @handleGetPlayUrl="handleGetPlayUrl"
        ></Catalogue>
      </van-tab>
      <van-tab title="评论">
        <Comment ref="Comment" />
      </van-tab>
      <van-tab title="相关">
        <Relevant
          ref="Relevant"
          :spcolumnId="result.spcolumnId"
          @handleChangeCrouse="handleChangeCrouse"
        />
      </van-tab>
    </van-tabs>

    <PayDialog ref="PayDialog" />
  </div>
</template>



<script>
import { defineComponent, nextTick, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getCuorsDetail, getVideoUrl, rewardCours } from "@/api/crouse";
import Detail from "../comps/Detail.vue";
import Comment from "../comps/CommentList.vue";
import Catalogue from "../comps/CatalogueCard.vue";
import Relevant from "../comps/RelevantCard.vue";
import PayDialog from "../comps/PayDialog.vue";
import { Dialog, Toast } from "vant";
export default defineComponent({
  components: {
    Catalogue,
    Detail,
    Comment,
    Relevant,
    PayDialog,
  },
  setup() {
    const show = ref(true);
    const router = useRouter();
    const route = useRoute();
    const active = ref(0);
    const videoPlayer = ref(); //播放器
    onMounted(() => {
      init();

      setTimeout(() => {
        videoPlayer.value.init();
      }, 100);
    });
    const result = ref({}); //课程详情
    const url = ref("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"); //播放地址
    const coverUrl = ref(""); //封面地址

    const chapterRsps = ref([]); //目录
    const init = async (courseId) => {
      show.value = true;
      const res = await getCuorsDetail({
        courseId: courseId ? courseId : route.query.courseId,
        isDraft: false,
      });
      if (typeof res == "object") {
        result.value = res;
        coverUrl.value = res.courseUrl;
        chapterRsps.value = res.chapterRsps;

        // 默认播放第一个
        if (
          res.chapterRsps &&
          res.chapterRsps.length &&
          res.chapterRsps[0].videoRsps.length
        ) {
          handleGetPlayUrl(
            res.chapterRsps[0].chapterId,
            res.chapterRsps[0].videoRsps[0].mediaId
          );
        }
      }
    };

    // 切换视频
    const PayDialog = ref();
    const handleGetPlayUrl = async (chapterId, mediaId) => {
      const res = await getVideoUrl({
        mediaId,
        chapterId,
      });
      if (res && res.length) {
        url.value = res[0].playURL;
        videoPlayer.value.Myplayer.poster = result.value.courseUrl;
        videoPlayer.value.Myplayer.src = res[0].playURL;
      } else {
        if (typeof res === "object") {
          // 未付费
          PayDialog.value.show = true;
        }
      }
    };

    const Comment = ref();
    const Relevant = ref();
    const onClickTab = ({ name }) => {
      setTimeout(() => {
        if (name == 1) {
          Comment.value.init();
        } else if (name == 2) {
        }
      }, 200);
    };

    const handleReward = async (v) => {
      const res = await rewardCours({
        courseId: route.query.courseId,
        price: v,
      });
      if (typeof res == "object") {
        Toast.success("赞赏成功");
      }
    };

    // 相关课程切换
    const handleChangeCrouse = (item) => {
      show.value = false;
      location.hash = `#/crousedetail?courseId=${item.courseId}`;
      init(item.courseId);
    };

    const handleRturn = () => {
      router.go(-1);
    };
    return {
      show,
      active,
      result,
      router,
      PayDialog,
      videoPlayer,
      url,
      coverUrl,
      chapterRsps,
      Comment,
      Relevant,
      handleGetPlayUrl,
      onClickTab,
      handleReward,
      handleChangeCrouse,
      handleRturn,
    };
  },
});
</script>



<style lang="scss" scoped>
</style>